<!DOCTYPE html>
<html>
	<head>
		<title>$Fallback.VideoTitle - nTube</title>
		<meta name="application-name" content="nTube" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="UTF-8" />
		<meta name="robots" content="noindex, nofollow" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<style>
			* {
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			body {
				background-color: black;
				color: white;
			}

			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}

			.menu-item {
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
	</head>

	<body>
		<div class="menu">
			<div class="menu-item">
				<p style="padding-left: 5px; margin-top: 5px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px; width: auto">
					<span style="color: red">n</span><span id="ntube_main_menu_tube_label" style="color: lightgreen">Tube</span>
					<sub id="ntube_version_main_menu_label" style="font-size: 0.9em; line-height: 25%">1.5.7</sub>
					<img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" decoding="async" />
				</p>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/" title="Home Page">
						<img src="resources/icons/home.svg" alt="home" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." value="Search isn't supported in fallback mode." disabled="true" />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
		</div>
		<div style="padding-bottom: 30px"></div>
		<div class="poly-item" style="height: 85%; padding-left: 0px" id="video_div">
			<div id="video_primary_div">
				<video id="_primary_player" style="width: 100%; height: 100%; padding-left: 0px" controls="true" controller="true" mediagroup="nPlayer.native" autoplay="true">$Fallback.videoInternals</video>
			</div>
		</div>
		<div class="poly-item">
			<h3 style="margin-top: 5px; margin-bottom: 5px">$Fallback.VideoTitle</h3>
			<p style="margin-top: 5px; margin-bottom: 5px">$Fallback.VideoAuthor</p>
		</div>
		<div class="poly-item" style="border-color: orange">
			<h3 style="margin-top: 5px; margin-bottom: 5px">You've been put into nTube Fallback mode.</h3>
			<p style="margin-top: 5px; margin-bottom: 5px">This is nTube without any JavaScript meaning that nPlayer is not used and livestreams aren't supported non-natively.</p>
		</div>
	</body>
</html>
